Skip to main content

Examples

Examples

Here are a few examples showcasing the usage of the Clock Widget in different scenarios:

Basic Clock Widget​

12:33:21 PM
import React from 'react';
import { Clock } from 'widgetsy';

function App() {
  return (
    <div>
      <Clock />
    </div>
  );
}

export default App;

In this example, a basic Clock Widget is rendered without any customizations. The widget will display the current time using the default styles.

Customized Clock Widget​

12:33:21 PM
import React from 'react';
import { Clock } from 'widgetsy';

function App() {
  return (
    <div>
      <Clock
        backgroundColor={[
          { color: '#003973', stop: 0 },
          { color: '#a6a679', stop: 100 },
        ]}
        rotation={45}
        primaryFont="#000000"
      />
    </div>
  );
}

In this example, the Clock Widget is customized with a background gradient, rotation of 45 degrees, white primary font color, and black primary color for UI elements.

Clock Widget with Theme​

12:33:21 PM
import React from 'react';
import { Clock } from 'widgetsy';

function App() {
  return (
    <div>
      <Clock
        theme={1}
        rotation={45}
        primaryFont="#000000"
      />
    </div>
  );
}

In this example, the Clock Widget is customized with a background gradient, rotation of 45 degrees, white primary font color, and black primary color for UI elements.

Feel free to customize the Clock Widget's props according to your specific requirements and UI design.